<template>
	<!-- :customStyle="{bottom:'105px'||0}" -->
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<view class="popup_con">
			<view class="fixedTitle_oblation">
				<view class="left"></view>
				<view class="middle">
					添香油
				</view>
				<view class="right">
					<u-icon @click="closeMore" class="close" name="close" color="black" size="20"></u-icon>
				</view>
			</view>
			<view class="addOil">
				<view class="addOil_item" @click="setIndex(index)"
					v-for="item,index in [{a:'30天',b:680},{a:'7天',b:28},{a:'1天',b:8},{a:'8小时',b:5},{a:'1小时',b:2}]">
					<image class="addOil_item_bgc"
						:src="index==activeIndex?'http://112.124.50.179:8888/imgs/home/addOil1.png':'http://112.124.50.179:8888/imgs/home/addOil2.png'"
						mode=""></image>
					<view style="z-index: 2;">{{item.a}}香油</view>
					<view class="display_flex coinBox">
						<view>{{item.b}}</view>
						<image class="coin" src="http://112.124.50.179:8888/imgs/home/coin.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
	<Footer @sendHeight='sendHeight' @openEquip='openEquip' v-if="show" :isShow='false' :type='"addOil"'
		@queryParent='queryParent' />
	<!-- <Equip ref='EquipRef' :bottom_height='bottom_height' /> -->
</template>

<script setup>
	import {
		defineEmits,
		ref
	} from 'vue'
	import Footer from './footer.vue'
	import {
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import Equip from "./equip.vue"
	const emit = defineEmits(['query'])
	const show = ref(false)
	const activeIndex = ref(0)
	const EquipRef = ref()
	const setIndex = ((index) => {
		activeIndex.value = index
	})
	let height = ref(0)
	let bottom_height = ref(0)
	const queryParent = () => {
		emit('query')
	}
	const sendHeight = ((e) => {
		bottom_height.value = e + 'px'
	})
	const closeMore = (() => {
		show.value = false
	})
	const openEquip = ((e) => {
		EquipRef.value.show = e
	})
	defineExpose({
		show
	})
</script>


<style lang="scss">
	::v-deep.u-popup__content {
		padding: 0 !important;

	}

	.popup_con {
		background-image: url('http://112.124.50.179:8888/imgs/home/popbg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		// background-position: center;
		// height: 1200rpx;

	}

	.fixedTitle_oblation {
		width: 100%;
		font-size: 32rpx;
		color: #156778;
		padding-top: 60rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left,
		.right {
			width: 100rpx;
			flex-shrink: 0;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			padding-right: 32rpx;
			box-sizing: border-box;
		}

		.middle {
			flex: 1;
			text-align: center;
		}

	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}

	.addOil {
		width: 100%;
		height: 900rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 70rpx;

		.addOil_item {
			margin-bottom: 20rpx;
			width: 436rpx;
			height: 114rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 400;
			font-size: 32rpx;
			color: #156778;
			line-height: 32rpx;
			padding: 0 52rpx;
			box-sizing: border-box;

			&:last-child {
				margin-bottom: 0;
			}

			.addOil_item_bgc {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.coinBox {
				justify-content: space-between;
				text-align: right;
				z-index: 2;

				.coin {
					width: 26rpx;
					height: 26rpx;
					margin-left: 8rpx;
					z-index: 2;
				}
			}


		}
	}
</style>